<template>
    <div class="body">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</template>

<script setup>
import { computed, ref, watch, onBeforeUpdate, onUpdated } from 'vue'

const list = ref([])

const props = defineProps({
   msg: ''
})

// const list = computed(() =>{
//     _list.value.push(props.msg)
//     return [..._list.value]
// })

// watch(
//     () => props.msg,
//     (newVal,oldVal) =>{
//         list.value.push(newVal)
//     }
// )

// onBeforeUpdate(() =>{
//     list.value.push(props.msg)
// })

onUpdated(() =>{
    list.value.push(props.msg)
})
</script>

<style lang="css" scoped>

</style>